<template>
	<div>
    <Breadcrumb :style="{margin: '15px 0',float: 'left'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>系统管理</BreadcrumbItem>
      <BreadcrumbItem>特约商户</BreadcrumbItem>
    </Breadcrumb>
    <ButtonGroup :style="{ margin: '15px 0', float: 'right' }">
      <Button @click="insertOrg" type="warning">新增</Button>
    </ButtonGroup>
    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 500px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="doSearch" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Select style="width:120px" placeholder="审核状态" clearable @on-change="selectAudit">
            <Option :value="1">待审核</Option>
            <Option :value="2">审核通过</Option>
            <Option :value="3">驳回</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="Init"></HigPager>
    </Content>
    
    <Modal :footer-hide="true" v-model="dialogVisible" title="商户信息" width="70%">
        <div class="layer_top">
          <div class="name-area"> <span class="names">商户名称：</span>{{ objDate.orgName }}</div>
          <div class="name-area"><span class="names">工商执照号码：</span>{{ objDate.unionCreditCode }}</div>
          <div class="name-area"><span class="names">法人姓名：</span>{{ objDate.legalPerson }}</div>
          <div class="name-area"><span class="names">法人电话：</span>{{ objDate.legalMobile }}</div>
          <div class="name-area"><span class="names">法人身份证：</span>{{ objDate.idCardNo }}</div>
          <div class="name-area"><span class="names">联系人：</span>{{ objDate.contactName }}</div>
          <div class="name-area"><span class="names">联系电话：</span>{{ objDate.contactMobile }}</div>
          <div class="name-area"><span class="names">组织类型：</span>{{ objDate.mchTypeText }}</div>
          <div class="name-area"><span class="names">审核状态：</span>{{ objDate.auditText }}</div>
          <div class="name-area">
            <span class="names">所在地区：</span>
            {{objDate.provinceName}} 
            {{objDate.cityName}} 
            {{objDate.countyName}} 
            {{ objDate.townshipName }}
          </div>
        </div>
        <div class="name-area" style="width:100%"><span class="names">详细地址：</span>{{ objDate.addressDetail }}</div>
        <div class="name-area" style="width:100%"><span class="names">经营内容：</span>{{ objDate.businessScope }}</div>
        <Divider>银行结算账户</Divider>
        <div class="name-area"> <span class="names">开户行名称：</span>{{ objDate.bankName }}</div>
        <div class="name-area"><span class="names">银行卡号：</span>{{ objDate.bankAccount }}</div>
        <Divider>上传附件</Divider>
        <div class="fileList">
          <span class="yings"><img class="imgs" :src="objDate.bizLicImage" alt=""><br>营业执照</span>
          <span class="yings"><img class="imgs" :src="objDate.idCardFront" alt=""><br>身份证照片</span>
        </div>
        <div class="fileList">
          <span class="yings"><img class="imgs" :src="objDate.idCardBack" alt=""><br>身份证照片</span>
          <span class="yings"><img class="imgs" :src="objDate.doorHeader" alt=""><br>店铺招牌</span>
        </div>
        <Input v-model="dataForm.auditNotes" type="textarea" :autosize="{minRows: 2,maxRows: 10}" placeholder="审核备注" />
        <div class="middle_btn">
          <Button v-if="isAudit" type="primary" @click="Submit(2)">通过</Button>
          <Button v-if="isAudit" type="default" @click="Submit(3)">驳回</Button>
        </div>
      </Modal>

      <Modal title="新增商户" :footer-hide="true" v-model="showCreate" width="70%">
        <InsertOrg :callbank="eventAction" :key="createKey" ref="refOrgCreate"></InsertOrg>
      </Modal>
      <Modal title="编辑商户" :footer-hide="true" v-model="showUpdate" width="70%">
        <UpdateOrg :callbank="eventAction" :key="createKey" ref="refSpcUpdate"></UpdateOrg>
      </Modal>
  </div>
</template>

<script scope>
import InsertOrg from './create.vue'
import UpdateOrg from './update.vue'
export default {
  data () {
    return {
      objDate:{},
      createKey: 0,
      isPass: true,
      isAudit: false,
      showCreate: false,
      showUpdate: false,
      pageTotal: 0,
      dialogVisible: false,
      keywords: null,
      dataGrid:[],
      dataForm: {
        userType: 2, //2商户
        auditNotes: null,
        orgId: null,
        auditorOrgId: this.$store.getOrg('orgId')
      },
      query: {
        pageIndex: 1,
        pageSize: 15,
        equal: {
          appType: 0
        },
        queryIn: {
          field: 'org_type',
          values: [0,1,5,6]
        }
      },
      columns: [
        {
          title: "商户名称",
          key: "orgName",
        },
        {
          title: "商户号",
          key: "mchId",
          width: 150,
        },
        {
          title: "统一社会信用代码",
          key: "unionCreditCode",
          width: 250,
        },
        {
          title: "法人",
          key: "legalPerson",
          width: 120,
        },
        {
          title: "联系电话",
          key: "legalMobile",
          width: 150,
        },
        {
          title: "审核状态",
          key: "auditText",
          width: 120,
        },
        {
          title: "申请时间",
          key: "postTime",
          width: 150,
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          fixed: "right",
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","下拉菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.btnSee(params.row,true)}},props:{disabled: params.row.orgStatus !== 1}},"审核"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.edit(params.row)}}},"编辑"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.btnSee(params.row,false)}}},"查看"),
                  ]
                ),
              ]
            )
          }
        }
      ]
    }
  },
  components: {
    InsertOrg,
    UpdateOrg
  },
  methods: {
    //审核
    Submit(status){
      this.dataForm.orgStatus = status
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-shop",
        url: "/v1.0/plus/audit/user/merchant",
        data: {
          pojo: this.dataForm
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: '操作成功',
              duration: 1,
              onClose: ()=> {
                this.dialogVisible = false
              }
            })
            this.Init()
          } else {
            this.$Notice.warning({
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).post()
    },
    selectAudit(status) {
      if(!this.query.equal) this.query.equal = new Object()
      this.query.equal.orgStatus = status
      this.Init()
    },
    doSearch() {
      let sqlLike = {
        fields: ["org_name","mch_id", "legal_mobile","legal_person","contact_mobile","union_credit_code"],
        keyword: this.keywords,
      }
      this.query.sqlLike = sqlLike
      this.query.pageIndex = 1
      this.Init()
    },
    reset() {
      delete this.query.sqlLike
      if(this.query.equal) delete this.query.equal.orgStatus
      this.keywords = null
      this.Init()
    },
    //获取列表
    Init(){
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/view/org/info/page',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.pageTotal = res.data.data.count
            this.dataGrid = res.data.data.list
            for(let item of this.dataGrid) {
              item.postTime = this.$date(item.postTime,'yyyy-MM-dd HH:mm')
              if(item.orgStatus === 1) {
                item.auditText = '待审核'
              } else if (item.orgStatus === 2) {
                item.auditText = '审核通过'
              } else if (item.orgStatus === 3) {
                item.auditText = '驳回'
              } else {
                item.auditText = '草稿'
              }
            }
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
     },
    //查看
    btnSee(e,bool){
      if(e.orgStatus !== 1) {
        return false
      }
      this.objDate = e
      this.dataForm.auditNotes = e.auditNotes
      this.dataForm.orgId = e.orgId
      this.objDate.mchTypeText = this.$enum.mchType(e.orgType)
      this.dialogVisible = true
      this.isAudit = bool
    },
    insertOrg() {
      this.showCreate = true
      this.$refs.refOrgCreate.Init()
    },
    edit(row) {
      this.showUpdate = true
      this.$refs.refSpcUpdate.Init(row.orgId)
    },
    eventAction() {
      this.showCreate = false
      this.showUpdate = false
      this.createKey ++
      this.Init()
    }
  },
  created(){
    this.Init()
  }
}
</script>
<style lang="less" scoped>
.layer_top {
  display: flex; flex-wrap: wrap;
}
.name-area {
  padding: 3px 0; width: 33%;
}
.names {
  width: 100px; font-weight: 800; display: inline-block;
}
.imgs {
  width: 60%;
}
.yings {
  display: block; width: 100%; text-align: center;
}
.fileList {
  display: flex; margin-top: 40px;
}
</style>